<template>
  <div>
    <el-container>
      <!-- 左侧导航栏 aside-->
      <el-aside :style="{ width: isCollapse ? 'auto' : '200px' }">
        <navbar :menus="menus" :collapse="isCollapse"></navbar>
      </el-aside>
      <!-- 右侧内容框 -->
      <el-container>
        <!-- 右侧导航栏 header -->
        <el-header>
          <i
            class="el-collapse el-icon-s-fold"
            :class="isCollapse ? 'collapseTransform' : ''"
            @click="handleCollapse"
          ></i>
          <el-dropdown trigger="click">
            <template>
            <div class="demo-type">
              <div>
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                <i class="el-icon-arrow-down el-icon-caret-bottom"></i>
              </div>
            </div>
          </template>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-edit-outline">主 页</el-dropdown-item>
              <el-dropdown-item icon="el-icon-setting">设 置</el-dropdown-item>
              <el-dropdown-item icon="el-icon-info">帮 助</el-dropdown-item>
              <el-dropdown-item confirm>
                <el-popconfirm
                  confirm-button-text='注销'
                  @confirm = 'handleConfirmLogout'
                  cancel-button-text='不用'
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定注销！！！">
                  <el-button 
                    style="border:none;margin-left: -1.27rem;" 
                    icon="el-icon-s-promotion" 
                    slot="reference">退 出
                  </el-button>
                </el-popconfirm>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        
        <!-- 右侧内容框 main -->
        <el-main>
          <router-view></router-view>
        </el-main>

        <!-- 右侧底栏 footer -->
        <el-footer>Copyright © 2021 没啥用科技 All Rights Reserved</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import routes from "@/router/routes";
import Navbar from "@/components/Navbar";

export default {
  components: {
    Navbar
  },
  data() {
    return {
      isCollapse: false,
      dialogVisible:false,
    };
  },
  methods: {
    resolve(arr, parentPath = "") {
      let newArr = [];

      //遍历数组中的每一个元素
      arr.forEach(route => {
        let obj = Object.assign({}, route);

        parentPath =
          parentPath && parentPath.lastIndexOf("/") !== parentPath.length - 1
            ? parentPath + "/"
            : parentPath;

        // 总是给加上父级路径
        obj.path = parentPath + obj.path;
        // console.log(obj.path);
        // 判断有没有children属性 如有，那么需要再处理，如果没有则直接push到一个新数组中
        if (obj.children && obj.children.length > 0) {
          obj.children = this.resolve(obj.children, obj.path);
        }
        // 如果当前的路由原信息hidden信息，那么就将其节点提升上来
        if(obj.meta && obj.meta.hidden){
          if(obj.children && obj.children.length > 0){
            obj.children.forEach((item) => {
              let tmp = Object.assign({}, item);
              newArr.push(tmp);
            });
          }
        }else{
          newArr.push(obj);
        }
      });
      // console.log(newArr);
      return newArr;
    },
    //折叠图标
    handleCollapse(){
      this.isCollapse = !this.isCollapse;
    },
    //注销按钮
    handleLogout(){
      this.dialogVisible = true;
    },
    //注销下拉框
    handleConfirmLogout(){
      this.dialogVisible = false;
      localStorage.removeItem('accessToken');
      localStorage.removeItem('refreshToken');
      this.$router.push('/login').then(() => {
        this.$message({
          type: 'success',
          message: '注销成功!'
        });
      })
    },
  },
  computed: {
    menus() {
      let arr = this.resolve(routes);
      return arr;
    }
  }
};
</script>


<style>
.el-aside {width: 200px;}
.el-main {background-color: azure;}
.el-footer {background-color: rgb(198, 238, 238);display: flex;align-items: center;justify-content: center;}
.el-collapse {font-size: 1.5rem;}
/* 收起图标旋转180度 */
.collapseTransform {transform: rotate(-180deg);}
.el-menu--horizontal {border-right: none;}
body.el-scrollbar__wrap {overflow-x: hidden;}
.el-menu--horizontal{height: 600px;}
.el-header {background-color: #eeeeee;display: flex;align-items: center;justify-content: space-between;}
</style>